<template>
  <!-- 用户注册信息 -->
  <!-- :show="regShow" -->
  <van-overlay :show="regShow" class="myregbox" :lock-scroll="true">
    <div class="wrapper" @click.stop>
      <div class="block">
        <div class="flexb">
          <div class="title">填写注册信息</div>
          <div>
            <van-icon name="cross" size="20" @click="close" />
          </div>
        </div>
        <div class="form-style">
          <!-- <van-field
            readonly
            clickable
            label="城市"
            :value="form.value"
            placeholder="选择城市"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker"  round position="bottom">
           
            <van-picker
              show-toolbar
              :columns="schoolList"
              value-key="name"
              value-id="depart_code"
              @change="changePicker"
            >
            <template #default>
              <div class="pboxs">
                 <span class="text" @click="cancelBox">取消</span>
                 <van-search v-model="form.keyword" placeholder="请输入搜索关键词" />
                 <span  @click="onConfirm" class="text">确认</span>
              </div>
            </template>
          </van-picker>
          </van-popup> -->
         
          <el-form ref="form" :model="form" label-width="80px">
            <!-- 学校 -->
            <el-form-item>
              <el-select
                filterable
                v-model="form.depart_code"
                placeholder="请选择学校"
                @change="handleChange"
                autocomplete="off"
              >
                <el-option
                id="selectvalue"
                  v-for="(item, index) in schoolList"
                  :key="index"
                  :label="item.name"
                  :value="item.depart_code"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 学院 -->
            <el-form-item>
              <el-select
                filterable
                v-model="form.college_id"
                placeholder="请选择学院"
              >
                <el-option
                  v-for="(item, index) in collageColumns"
                  :key="index"
                  :label="item.college_name"
                  :value="item.college_id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="container">
                <el-select v-model="form.grade" placeholder="选择入学学年">
                  <el-option
                    v-for="year in yearTime"
                    :key="year"
                    :value="year"
                    :label="year"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="flexc">
              <el-button
                type="primary"
                @click="onSubmit"
                style="background-color: #f57373; border: none"
                >确定提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script>
export default {
  data() {
    return {
      openid: $.cookie("openid"),
      infoShow: true,
      schoolList: [],
      collageColumns: [], //学院
      form: {
        depart_code: "", //请选择学校
        grade: "", //请选择入学年份
        gender: "", //性别
      },
      years: [],
      showPicker: false,
      
    };
  },
  computed: {
   
    yearTime() {
      const currentYear = new Date().getFullYear();
      const minYear = currentYear - 6;
      const maxYear = currentYear;
      for (let year = maxYear; year >= minYear; year--) {
        this.years.push(year);
      }
      return this.years;
    },
  },
  methods: {
   
    changePicker(val) {
      console.log(val);
    },
    cancelBox() {
      this.showPicker = false;
    },
    onConfirm() {
      this.showPicker = false;
    },
    handleChange(value) {
      console.log(value, "学校");
      if (value) {
        // 获取学院信息
        this.getCollegelist(value);
      }
    },
    //获取学院
    async getCollegelist(depart_code) {
      let res = await this.$ajax.collegelist({
        depart_code: depart_code,
      });
      if (res.code == 1) {
        this.collageColumns = res.data;
      }
    },
    /*获取用户信息*/
    async getUserInfo() {
      let res = await this.$ajax.getPersoninfo({
        openid: this.openid,
      });
      if (res.code == 1) {
        this.changeUserInfo(res.data);
      }
    },
    close() {
      this.changeRegShow(false);
    },
    /*高校列表*/
    async getSchoolList() {
      let res = await this.$ajax.schoollist();
      if (res.code == 1) {
        this.schoolList = res.data;
      }
    },
    /*确定提交*/
    async onSubmit() {
      if (this.form.depart_code && this.form.grade && this.form.gender) {
        console.log(this.openid);
        let res = await this.$ajax.Register({
          depart_code: this.form.depart_code,
          grade: this.form.grade,
          gender: this.form.gender,
          college_id: this.form.college_id,
          openid: $.cookie("openid"), // 有待测试
        });
        if (res.code == 1) {
          this.getUserInfo();
          this.$toast(res.msg);
          this.changeRegShow(false); //成功关闭弹框
          if (this.$route.name == "activityList") {
            this.$bus.$emit("reload");
          }
        } else {
          this.$toast(res.msg);
          setTimeout(() => {
            this.changeRegShow(false); //提示完，关闭弹框
          }, 1000);
        }

        console.log(this.form, "注册数据");
      } else {
        this.$toast("请输入完整的信息");
      }
    },
  },
  mounted() {
    this.getSchoolList(); //高校列表

    // Array.from(document.getElementsByClassName("el-select")).forEach((item) => {
    //   item.children[0].children[0].removeAttribute("readOnly");
    //   item.children[0].children[0].onblur = function () {
    //     let _this = this;
    //     setTimeout(() => {
    //       _this.removeAttribute("readOnly");
    //     }, 200);
    //   };
    // });
    
    // 只获取第一个匹配的元素进行操作
    const item = document.querySelector(".el-select");
    item.children[0].children[0].removeAttribute("readOnly");
    item.children[0].children[0].onblur = function () {
      let _this = this;
      setTimeout(()=>{
        _this.removeAttribute("readOnly");
      },200)
    }

   

  },
};
</script>

<style lang="scss" scoped>
.pboxs {
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .text {
    font-size: 14px;
    color: #666;
    display: block;
    flex-shrink: 0;
    width: 30px;
    text-align: center;
  }
}
.myregbox {
  width: 100%;
  height: 100vh;
}
.display-justbet {
  display: flex;
  justify-content: space-between;
}

.flexc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// 弹框样式
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .block {
    position: absolute;
    width: 312px;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    // height: 280px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    .title {
      font-size: 20px;
    }

    .toast-style {
      font-size: 24px;
      margin: 20px 10px;
    }
    .btn-style {
      margin-top: 50px;
    }
  }
}
.form-style {
  margin-top: 20px;
  ::v-deep .el-form-item__content {
    margin-left: 0px !important;
    .el-select {
      width: 95%;
    }
  }
}
.el-date-editor.el-input {
  width: 95%;
}
</style>